<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
<div id="details">
    <div class="publicTop">
        <iframe src="top.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    <div class="movieInfor">
        <div class="movieImg">
            <div class="movieSmpic"></div>
            <img class="imge" v-bind:src="'../img/movieImg/'+movie.movieImgPath"
            width="100%" height="100%">
        </div>
        <div class="movieDetails">
            <div class="inforSome">
                <h1 style="font-size: 20px">{{movie.movieName}}</h1>
                <div class="name">{{movie.translateName}}</div>
                <ul style="font-size: 15px">
                    <li >
                        {{movie.type}}
                    </li>
                    <li>
                        {{movie.producing}}
                    </li>
                    <li>
                        {{movie.showTime}}中国大陆上映</li>
                </ul>
            </div>
            <div class="styleFirst">
                <div class="one" >
                    <img src="img1/aixin.png" style="width: 15px;vertical-align: middle">
                    <span>想看</span>
                </div>
                <div class="two">
                    <img src="img1/xh.png" style="width: 15px;vertical-align: middle">
                    <span>评分</span>
                </div>
            </div>
            <div class="styleSecond">特惠购票</div>
        </div>
        <div class="movieScore">
            <div style="font-size: 10px;margin-bottom: 4px">猫眼口碑</div>
            <div class="word" style="font-size: 25px;color: #ffc600">{{movie.score}}</div>
            <div style="font-size: 10px;margin-bottom: 8px">累计票房</div>
            <div class="word" style="font-size: 25px">{{movie.watchNum}}<span style="font-size: 10px">亿</span></div>

        </div>

    </div>

</div>
<script type="text/javascript" src="js_view/vue.js"></script>
<script type="text/javascript" src="js_view/axios.main.js"></script>
<script type="text/javascript">
    //从请求中获取到参数
    var urlData = new URLSearchParams(location.search);
    var id = urlData.get("id");
    var details = new Vue({
        el:"#details",
        data:{
            movie:""
        },
        methods:{
            getMovieInfo:function () {
                axios.get("http://localhost:8081/getMovieById?id="+id)
                    .then((result)=>{
                        console.log(result);
                        this.movie = result.data;
                }).catch()

            }

        },
        created(){
            this.getMovieInfo();
        }

    })

</script>
</body>
</html>